<template>
    <div style="margin: 30px 20px;">
        <div style="margin-bottom: 20px;">
            <el-page-header @back="goBack" content="在线组卷">
            </el-page-header>
        </div>
        <div style="margin-bottom: 20px;">
            <span class="selected-tag" @click="tagSelected(tag)"
                :style="{ backgroundColor: activeTag === tag ? 'rgb(235, 237, 245)' : '#fff', color: activeTag === tag ? 'rgb(43, 121, 203)' : '#000' }"
                v-for="(tag, index) in funTags" :key="index">
                <i v-if="index === 0" class="el-icon-question"></i>
                <i v-else-if="index === 1" class="el-icon-s-order"></i>
                <i v-else class="el-icon-upload"></i>
                {{ tag }}
            </span>
        </div>
        <AutoCreatePaper v-if="activeTag === funTags[2]" @to-self="toSelf" />
        <PracticeList v-if="activeTag === funTags[1]" @to-self="toSelf" />
        <SelfPractice v-if="activeTag === funTags[0]" />
    </div>
</template>
<script>
import AutoCreatePaper from "@/views/admin/paper/AutoCreatePaper"
import PracticeList from "@/views/admin/paper/PracticeList"
import SelfPractice from "@/views/admin/paper/SelfPractice"
export default {
    components: { AutoCreatePaper, PracticeList, SelfPractice },
    data() {
        return {
            funTags: ['卷面', '题库', '自动组卷'],
            activeTag: '',
            paperInfo: {},
            practiceTypes: []
        }
    },
    created() {
        this.tagSelected(this.funTags[0]);
        this.loadAllPracticeTypes();
    },
    methods: {
        toSelf(flag) {
            if (flag) {
                this.tagSelected(this.funTags[0]);
            }
        },
        goBack() {
            this.$router.go(-1);
        },
        // 解析卷子信息
        loadPaperInfo() {
            const paperJson = sessionStorage.getItem('paperInfo');
            this.paperInfo = JSON.parse(paperJson);
        },
        // 记载全部的题型
        loadAllPracticeTypes() {
            this.$axios.get(`/practice/getPracticeTypes`).then(response => {
                const { data } = response;
                if (data.code === 200) {
                    this.practiceTypes = data.data;
                }
            })
        },
        // 组卷功能选中
        tagSelected(tag) {
            this.activeTag = tag;
        },
    }
};
</script>
<style scoped lang="scss">
.selected-tag {
    display: inline-block;
    margin-right: 25px;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}
</style>